<template>
	<view>
		<ttBar leftIcon="icon-back" :title="pageTitle[nowStep]" rightIcon=""></ttBar>
		<view class="mainCnt">
			<!-- 顶部进度条 -->
			<view class="progressBox">
				<view class="progressItem" :class="[nowStep>=1?'active':'']">
					<text class="progressNum">1</text>
					<text class="progressText">选择类型</text>
					<text class="iconfont icon-right"></text>
				</view>
				<view class="progressItem" :class="[nowStep>=2?'active':'']">
					<text class="progressNum">2</text>
					<text class="progressText">填写信息</text>
					<text class="iconfont icon-right"></text>
				</view>
				<view class="progressItem" :class="[nowStep>=3?'active':'']">
					<text class="progressNum">3</text>
					<text class="progressText">上传材料</text>
				</view>
			</view>
			
			<!-- 步骤修改返回 -->
			<view class="typeBox2" v-if="nowStep>=2" @tap="editBack(1)">
				<view class="typeInfo">
					<text class="typeTitle">认证类型</text>
				</view>
				<text class="editWords">{{settledInfo.type==1?'企业':'个人'}}</text>
				<text class="iconfont icon-right"></text>
			</view>
			<view class="typeBox2" v-if="nowStep==3" @tap="editBack(2)">
				<view class="typeInfo">
					<text class="typeTitle">{{settledInfo.type==1?'企业信息':'个人信息'}}</text>
				</view>
				<text class="editWords">修改</text>
				<text class="iconfont icon-right"></text>
			</view>
			
			<!-- 第一步选择类型 -->
			<view class="typeBox" v-if="nowStep==1">
				
				<view class="tpyeItem tapOpt" @tap="toggleRegType" data-type="1">
					<text class="iconfont " :class="[settledInfo.type==1?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
					<view class="itemInfo">
						<text>企业</text>
						<text>需提供营业执照、法人等信息</text>
					</view>
				</view>
				<view class="tpyeItem tapOpt" @tap="toggleRegType" data-type="2">
					<text class="iconfont " :class="[settledInfo.type==2?'icon-yuanxingxuanzhongfill':'icon-yuanxingweixuanzhong']"></text>
					<view class="itemInfo">
						<text>个人</text>
						<text>需要提供个人身份证等信息</text>
					</view>
				</view>
				<text class="tishi">一经选定不能随意变更</text>
				<button class="nextBtn tapOpt" @tap="nextStep" >下一步</button>
			</view>
			
			<!-- 第二部填写信息 -->
			<!-- 企业 -->
			<view class="infoBox" v-if="(nowStep==2) && (settledInfo.type==1)">
				<view class="row">
					<text class="required">*</text>
					<text class="infoLabel">企 业 名 称</text>
					<input type="text" value="" placeholder="请填写企业名称" v-model="settledInfo.name" />
				</view>
				<view class="row">
					<text class="norequired">*</text>
					<text class="infoLabel">企业注册号</text>
					<input type="text" value="" placeholder="请填写企业统一社会信用码" v-model="settledInfo.certiNo" maxlength="30" />
				</view>
				<view class="row">
					<text class="required">*</text>
					<text class="infoLabel">企 业 法 人</text>
					<input type="text" value="" placeholder="请填写法人姓名" v-model="settledInfo.realname" maxlength="50" />
				</view>
				<view class="row">
					<text class="norequired">*</text>
					<text class="infoLabel">法人身份证</text>
					<input type="text" value="" placeholder="请填写法人身份证号码" v-model="settledInfo.cardNo" maxlength="18" />
				</view>
				
				<button class="nextBtn" @tap="nextStep2">下一步</button>
			</view>
			<!-- 个人 -->
			<view class="infoBox" v-if="(nowStep==2) && (settledInfo.type==2)">
				<view class="row">
					<text class="required">*</text>
					<text class="infoLabel">真 实 姓 名</text>
					<input type="text" value="" placeholder="请填写真实姓名" v-model="settledInfo.realname" maxlength="50" />
				</view>
				<view class="row">
					<text class="norequired">*</text>
					<text class="infoLabel">身份证号码</text>
					<input type="text" value="" placeholder="请填写18位身份证号码" v-model="settledInfo.cardNo" maxlength="18" />
				</view>
				<!-- <view class="row">
					<text class="infoLabel">教师资格证</text>
					<input type="text" value="" placeholder="请填写教师资格证编码" v-model="zgzCode" />
				</view> -->
				<button class="nextBtn" @tap="nextStep2">下一步</button>
			</view>
			
			<!-- 第三部 上传资料 -->
			<view class="authBox" v-if="nowStep==3">
				<text class="authTitle" v-if="settledInfo.type==1">{{settledInfo.type==1?'营业执照备案':'教师资格证/学历证书'}}</text>
				<view class="zigeImgBox zigeImgBox1" v-if="settledInfo.type==1" :style="{'height':settledInfo.certi?imgBoxWidth+'px':''}" data-type="certi" @tap="selectImg">
					<view class="imgBtnbox">
						<view v-if="!settledInfo.certi" class="addBtn"  >
							<text class="iconfont icon-add"></text>
						</view>
						<text v-if="!settledInfo.certi" class="addText">{{settledInfo.type==1?'上传营业执照':'上传教师资格证'}}</text>
					</view>
					<image v-if="settledInfo.certi" :src="settledInfo.certi"  mode="aspectFit" ></image>
				</view>
				<!-- <view v-if="settledInfo.type!=2" class="zigeImgBox" :style="{'height':settledInfo.eduCerti?imgBoxWidth+'px':''}" data-type="eduCerti" @tap="selectImg">
					<view class="imgBtnbox">
						<view v-if="!settledInfo.eduCerti" class="addBtn"  >
							<text class="iconfont icon-add"></text>
						</view>
						<text v-if="!settledInfo.eduCerti" class="addText">{{settledInfo.type==1?'上传营业执照':'学历证书'}}</text>
					</view>
					<image v-if="settledInfo.eduCerti" :src="settledInfo.eduCerti"  mode="aspectFit" ></image>
				</view> -->
				<text class="authTitle">{{settledInfo.type==1?'企业':'个人'}}实名认证</text>
				<text class="sfzTishi  sfzTishi3" v-if="settledInfo.type==2">点亮实名认证标志，获取平台更多曝光量</text>
				<text class="sfzTishi " :class="[settledInfo.type==2?'sfzTishi2':'']">依照行业规定，平台需校验{{settledInfo.type==1?'企业法人':'个人手持身份'}}证件信息</text>
				<view class="sfzImgBox">
					<!-- 企业 -->
					<block v-if="settledInfo.type==1">
						<view class="sfzImgItem" data-type="cardz" @tap="selectImg">
							
							<image  :src="settledInfo.cardz?settledInfo.cardz:'../../static/sfzzm.png'"  mode="aspectFit" ></image>
						</view>
						<view class="sfzImgItem" data-type="cardf" @tap="selectImg">
							
							<image  :src="settledInfo.cardf?settledInfo.cardf:'../../static/sfzbm.png'"  mode="aspectFit" ></image>
						</view>
					</block>
					<!-- 个人 -->
					<block v-if="settledInfo.type==2">
						<view class="sfzImgItem " data-type="cardz" @tap="selectImg">
							<image :src="settledInfo.cardz?settledInfo.cardz:'../../static/grrx.png'"  mode="aspectFit" ></image>
						</view>
						<view class="sfzImgItem " data-type="cardf" @tap="selectImg">
							<image  :src="settledInfo.cardf?settledInfo.cardf:'../../static/grgh.png'"  mode="aspectFit" ></image>
						</view>
					</block>
				</view>
				
				<button class="nextBtn" :disabled="isDis" @tap="tijiao">提交审核</button>
			</view>
			

		</view>
		<poup ref="remarkPoup">
		</poup>
		<updateModal ref="upModal"></updateModal>
		<downLoding></downLoding>
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import poup from "@/components/poup/poup.vue";
	import downLoding from "@/components/downLoding/downLoding.vue";
	import updateModal from "@/components/updateModal/updateModal.vue";
	import API from "@/common/api.js";
	import {mapState} from "vuex";
	export default {
		components: {
			ttBar,
			poup,
			downLoding,
			updateModal
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				settledProgress:state=>state.settled.settledProgress
			})
		},
		data() {
			return {
				isEdit:false,
				pageTitle:['','选择类型','填写信息','上传材料'],
				nowStep:1,
				imgBoxWidth:uni.getSystemInfoSync().screenWidth-uni.upx2px(98),
				settledInfo:{
					type:null,
					name: '', //企业名称
					realname: '', //法人姓名		个人姓名
					cardNo:'',		//法人身份号码	个人身份证号
					certi:'',		//营业执照     or  教师资格证
					certiNo:'',		//营业执照编码  or 教师资格证编码
					cardz:'',		//身份证正面
					cardf:'',		//身份证反面
					eduCerti:''	//学历证书
				},
				isShow:false,
				proTitle:'上传进度',
				prs:0,
				isDis:false
				
				
			};
		},
		methods:{
			// 切换入驻类型
			toggleRegType(e){
				this.settledInfo.type=parseInt(e.currentTarget.dataset.type) 
			},
			nextStep(){
				var _this=this;
				if(this.settledInfo.type==null){
					uni.showToast({
						title: '请选择入驻类型',
						icon: 'none'
					});
				}else{
					this.nowStep=2
				}
			},
			nextStep2() {
				uni.hideKeyboard()
				if (this.settledInfo.type==1) {
					this.checkShop()
				} else {
					this.checkPerson()
				}
			},
			// 检查企业信息输入
			checkShop() {
				let sfReg=/^\d{17}(\d|X|x)$/;
				if (!this.settledInfo.name) {
					uni.showToast({
						title: '请输入企业名称',
						icon: 'none'
					});
				} else if (!this.settledInfo.realname) {
					uni.showToast({
						title: '请输入企业法人',
						icon: 'none'
					});
				} else  {
					this.nowStep=3
				}
			},
			
			// 检查个人信息输入
			checkPerson() {
				let sfReg=/^\d{17}(\d|X|x)$/;
				if (!this.settledInfo.realname) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
				} else {
					this.nowStep=3
				}
			},
			// 修改回退
			editBack(e){
				if(e==1&&this.isEdit){
					
				}else{
					this.nowStep=e
				}
				
			},
			// 选择图片
			selectImg(e) {
				let _type=e.currentTarget.dataset.type;
				// console.log(_type);
				let _this=this;
				uni.chooseImage({
				    count: 1, 
				    sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType:['album','camera'],
				    success: function (res) {
						if(res.tempFiles[0].size>5242800){//5242800
							uni.showToast({
								title: '图片大小不能超过5MB，请重新选择',
								icon: 'none'
							});
						}else{
							_this.isShow=false
							API.uploadSingleImg(res.tempFilePaths[0],'file').then(res=>{
								_this.isShow=true
								_this.settledInfo[_type]=res.data.data.url
								
							})
						}
						
				        
				    }
				});
			},
			// 提交数据
			tijiao() {
				let _this=this;
				_this.$refs.remarkPoup.init({
					title:'确认提交',
					cntText:'请仔细核对资料，审核过程中已提交的资料无法修改',
					confirm:'提交',
					confirmFcn:()=>{
						
						_this.settledInfo.userId=_this.userInfo.userId;
						_this.$store.dispatch("postSettled",_this.settledInfo)
						.then(res=>{
							if(res.data.code==1){
								_this.isDis=true;
								setTimeout(()=>{
									uni.redirectTo({
										url:"../selectShop/selectShop"
									})
								},1000)
							}else{
								
							}
							
						})
					}
				})
				
				_this.$refs.remarkPoup.show()
			},
		},
		onLoad(cfm) {
			if(cfm.nowstep){
				this.nowStep=parseInt(cfm.nowstep);
				this.settledInfo=this.settledProgress
				this.isEdit=true;
			}
			// uni.$on("setPrs",res=>{
			// 	if(res.progress<100){
			// 		this.isShow=true
			// 		this.prs=res.progress
			// 	}else{
			// 		this.isShow=false
			// 	}
			// })
			
		},
		onBackPress() {
			if(this.settledInfo.status!=3){
				uni.removeStorageSync("token");
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}
	.mainCnt{
		padding-top: 22upx;
	}
	.progressBox {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 21upx;
		padding: 30px 10upx;
		
		justify-content: space-around;

		.progressItem {
			display: flex;
			align-items: center;


			.progressNum {
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				text-align: center;
				line-height: 40upx;
				background-color: #a0a0aa;
				flex-shrink: 0;
				font-size: 26upx;
				font-weight: bold;
				color: #ffffff;
				margin-right: 5upx;
			}

			.progressText {
				font-size: 24rpx;
				font-weight: bold;
				color: #07080d;
			}
		}
		.active{
			.progressNum{
				background-color: #ffb423;
				color: #07080d;
			}
		}
	}
	.typeBox2 {
		margin-top: 22upx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 21upx;
		padding: 20px 45upx;
	
		.typeInfo {
			display: flex;
			flex-direction: column;
			flex: 1;
	
			.typeTitle {
				font-size: 35rpx;
				font-weight: bold;
				color: #07080d;
			}
	
			.typeText {
				margin-top: 12upx;
				font-size: 28rpx;
				color: #8c8c8f;
			}
		}
	
		.editWords {
			font-size: 32rpx;
			color: #a0a0aa;
		}
	
		.iconfont {
			font-size: 32upx;
			color: #a0a0aa;
			margin-left: 10upx;
		}
	}
	.typeBox {
		background-color: #FFFFFF;
		border-radius: 21upx;
		margin-top: 22upx;
		padding: 52upx 72upx;
		display: flex;
		flex-direction: column;

		.tpyeItem {
			display: flex;
			margin-bottom: 80upx;
			padding: 0 10upx;
			.itemInfo {
				display: flex;
				flex-direction: column;

				text:first-child {
					font-size: 32upx;
					color: #07080d;
				}

				text:last-child {
					font-size: 32rpx;
					color: #07080d;
					margin-top: 15upx;
				}

			}

			.iconfont {
				font-size: 48upx;
				margin-right: 14upx;
			}
			.icon-yuanxingxuanzhongfill{
				color: #ffb423;
			}

		}
		
		.nextBtn {
			height: 88upx;
			background-color: #ffb423;
			border-radius: 44upx;
			line-height: 88upx;
			width: 100%;
			color: #FFFFFF;
			margin-top: 150upx;
		}

		.nextBtn:after {
			border: none;
		}
	}
	.infoBox {
		margin-top: 22upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 21upx;
		padding: 0 15upx;
	
		.row {
			display: flex;
			width: 100%;
			border-bottom: 1px solid #e7e7e7;
			padding: 55upx 32upx 27upx 32upx;
			align-items: center;
	
			.infoLabel {
				font-size: 30rpx;
				color: #07080d;
				margin-right: 64upx;
	
			}
	
			input {
				font-size: 30upx;
				flex-grow: 1;
				width: 350upx;
				flex: 1;
			}
	
			.iconfont {
				font-size: 28upx;
				color: #07080d;
			}
	
			
		}
		.mapImg {
			margin-top:20upx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			>text{
				display: inline-block;
				position: absolute;
				right: 20upx;
				top: 20upx;
				font-size: 28upx;
				background-color: #FFFFFF;
				border-radius: 10upx;
				padding: 10upx 30upx;
				box-shadow: 0upx 5upx 10upx 0rpx 
						rgba(0, 0, 0, 0.3);
			}
		}
	}
	
	.authBox {
		margin-top: 22upx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		border-radius: 21upx;
		padding: 0upx 18upx 30upx 18upx;
	
		.authTitle {
			font-size: 35rpx;
			font-weight: bold;
			color: #07080d;
			margin-left: 27upx;
			margin-top: 30upx;
		}
		
		.zigeImgBox {
			margin-top: 34upx;
			margin-bottom: 34upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
			border-radius: 21rpx;
			border: dashed 2rpx #ffb423;
			background-color: #fef8e3;
			position: relative;
			height: 208upx;
			overflow: hidden;
			.imgBtnbox{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				z-index: 2;
			}
			.addBtn{
				width: 84upx;
				height: 84upx;
				text-align: center;
				border-radius: 50%;
				background-color: #ffb423;
				line-height: 84upx;
				margin-top: 33upx;
				margin-bottom: 20upx;
				position: relative;
				z-index: 2;
				.iconfont{
					font-size: 60upx;
					font-weight: bold;
					color: #07080d;
				}
			}
			.addText{
				font-size: 32rpx;
				color: #f49b0e;
				margin-bottom: 38upx;
				position: relative;
				z-index: 2;
			}
			image{
				height: 100%;
				position: relative;
				z-index: 1;
				flex-shrink: 0;
			}
		}
		
		.zigeImgBox1{
			margin-bottom: 0upx;
		}
		.sfzTishi{
			font-size: 24rpx;
			color: #848488;
			margin-left: 27upx;
			margin-top: 12upx;
			margin-bottom: 22upx;
		}
		.sfzTishi2{
			margin-bottom: 22upx;
			margin-top: 0;
		}
		.sfzTishi3{
			margin-bottom: 0;
			margin-top: 20upx;
			
			color: #ee3c58;
		}
		.sfzImgBox{
			display: flex;
			justify-content: space-between;
			.sfzImgItem{
				position: relative;
				width: 315upx;
				height: 204upx;
				border-radius:20upx;
				// background-image: url('~@/static/sfzzm.png');
				background-size: 100% 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex-grow: 0;
				flex-shrink: 0;
				overflow: hidden;
			}
			.sfzImgItem:last-child{
				// background-image: url('~@/static/sfzbm.png');
			}
			
			.gerenItem{
				background-image: url('~@/static/grrx.png');
			}
			.gerenItem:last-child{
				background-image: url('~@/static/grgh.png');
			}
			.imgBtnbox{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				z-index: 2;
			}
			.addBtn{
				width: 84upx;
				height: 84upx;
				text-align: center;
				border-radius: 50%;
				background-color: #ffb423;
				line-height: 84upx;
				margin-top: 33upx;
				margin-bottom: 20upx;
				position: relative;
				z-index: 2;
				.iconfont{
					font-size: 60upx;
					font-weight: bold;
					color: #07080d;
				}
			}
			.addText{
				font-size: 32rpx;
				color: #f49b0e;
				margin-bottom: 38upx;
				position: relative;
				z-index: 2;
			}
			image{
				width: 100%;
				position: relative;
				z-index: 9;
				flex-shrink: 0;
				display: block;
			}
		}
	}
	
	.nextBtn {
		height: 88upx;
		background-color: #ffb423;
		border-radius: 44upx;
		line-height: 88upx;
		width: 80%;
		color: #FFFFFF;
		margin-top: 50upx;
		margin-bottom: 38upx;
	}
	
	.nextBtn:after {
		border: none;
	}
	.tishi{
		font-size: 24upx;
		margin-bottom: 60upx;
		text-align: center;
		color: #a0a0aa;
	}
</style>
